<template>
    <div class="flex align-start">
        <div class="left">
            <div class="p-15">
                <div class="flex">
                    <img style="width: 30px; height: 30px" src="../../assets/img/11.png" alt="" />
                    <img style="width: 88px; height: 30px; margin-left: 10px" src="../../assets/img/12.png" alt="" />
                </div>
                <div class="zhong_cate mr-15">
                    <div class="item" v-for="item in category" :key="item.id" :class="{ active: item.id === activeId }"
                        @click="changeCategory(item.id)">{{ item.name }}</div>
                </div>
            </div>
        </div>

        <div class="right">
            <template v-if="activeId <= 0">
                <el-row :gutter="20">
                    <el-col :span="14">
                        <el-carousel trigger="click" height="430px">
                            <el-carousel-item v-for="item in bannerList" :key="item.id">
                                <img :src="item.image">
                            </el-carousel-item>
                        </el-carousel>
                    </el-col>
                    <el-col :span="10">
                        <indexNews />
                    </el-col>
                </el-row>
            </template>
            <template v-if="activeId > 0">
                <div class="category_content">
                    <div class="p-30">
                        <div style="font-weight: 600; font-size: 18px; color: #ef312a">
                            {{ category[activeId - 1].name }}
                        </div>
                        <div class="catecy flex">
                            <div class="cy_list" v-for="(it, index) in 5" :key="index" style="width: 48.5%">
                                <div class="hd-title">
                                    灭火类
                                </div>
                                <div class="items">
                                    <div class="item" v-for="(it, index) in 15" :key="index">
                                        水罐消防车（SG）
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
import indexNews from './indexNews.vue'
import { getBanner } from '@/api/apis'
export default {
    components: {
        indexNews
    },
    data () {
        return {
            activeId: 0,
            category: [
                {
                    id: 1,
                    name: '消防车'
                },
                {
                    id: 2,
                    name: '消防员防护装备'
                },
                {
                    id: 3,
                    name: '抢险救援器材'
                },
                {
                    id: 4,
                    name: '灭火剂'
                },
                {
                    id: 5,
                    name: '消防船艇'
                },
                {
                    id: 6,
                    name: '消防飞行器'
                }
            ],
            bannerList: []
        }
    },
    mounted() {
        this.getBanner()
    },
    methods: {
        changeCategory (id) {
            this.activeId = id
        },
        getBanner(){
            getBanner().then(res => {
                if (res.code === 1) {
                    this.bannerList = res.data
                }
            })
        }
    },
}
</script>

<style scoped lang="less">
.left {
    width: 15%;
    height: 430px;
    background-color: #ffffff;
    border-radius: 10px;
}

.right {
    flex: 1;
    margin-left: 15px;

    .category_content {
        background: #ffffff;
        border-radius: 10px;
        border: 1px solid #ef312a;
        height: 697px;
        overflow-y: auto;
        scrollbar-width: none;
    }

    .catecy {
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;

        .cy_list {
            .hd-title {
                font-weight: 500;
                font-size: 16px;
                color: #2e3033;
                padding: 15px 0;
                border-bottom: 2px solid #ef312a;
            }

            .items {
                display: flex;
                flex-wrap: wrap;

                .item {
                    font-weight: 400;
                    font-size: 14px;
                    color: #2e3033;
                    padding-right: 15px;
                    padding-top: 15px;
                }
            }
        }
    }
}

.hd-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}


.zhong_cate {
    .item {
        background: #fff;
        padding: 19px 0 19px 30px;
        font-weight: normal;
        font-size: 16px;
        color: #2e3033;
        border-radius: 4px;
        cursor: pointer;

        &:hover {
            color: #ef312a;
        }

        &.active {
            color: #ef312a;
            background: rgba(239, 49, 42, 0.2);
        }
    }
}

.el-carousel {
    border-radius: 10px;

    /deep/.is-active {
        .el-carousel__button {
            background-color: #ef312a;
        }
    }

    .el-carousel__container {
        .el-carousel__item {
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>